<template>
  <div>
    <!-- 头部导航 -->
    <my-home :home-show="homeShow"></my-home>
    <div class="header">
      <div class="left iconfont icon-24gf-playlistHeart" @click.stop="homeShowFun"></div>
      <div class="center">WuXin专属音乐播放器</div>
      <!-- <div class="right iconfont icon-search" @click.stop="show = !show"></div> -->
      <router-link class="right iconfont icon-search" tag="div" to="/search"></router-link>
    </div>
    <div class="navs">
      <router-link tag="div" to="/recommend" class="item"
        ><span>推荐</span></router-link
      >
      <router-link tag="div" to="/rank" class="item"
        ><span>排行榜</span></router-link
      >
      <router-link tag="div" to="/singer" class="item"
        ><span>歌手</span></router-link
      >
    </div>
  </div>
</template>

<script>
import { getSearchList, getTopMv, getSearch } from "../api/search";
import myHome from "./myHome.vue";

export default {
  components: { myHome },
  data: function () {
    return {
      show: false,
      value: "",
      DataList: null,
      getTopMv: null,
      flg: true,
      list: null,
      homeShow: false,
    };
  },
  methods: {
    homeShowFun(flg) {
      console.log(flg);
      this.homeShow = !this.homeShow;
    },
    // 调用父组件方法播放音乐
    setId(id) {
      this.$emit("get-player-id", id);
       this.$emit("get-play-all-id",this.$route.query.id);//传递歌单id
      
    },
  },
  created() {
    getSearchList().then((data) => {
      this.DataList = data.result.hots;
      // console.log(this.DataList)
    });
    getTopMv().then((data) => {
      this.getTopMv = data.data;
      console.log(data);
    });
  },
  watch: {
    value() {
      getSearch({
        value: this.value,
      }).then((data) => {
        this.list = data.result.songs;
        console.log(data);
      });
    },
  },
};
</script>

<style lang="less">
.header {
  background-color: transparent;
  color: #646566;
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;
  text-align: center;
   .van-popup__close-icon--top-left{
      left: 0;
    }
  .search-box {
    padding: 0 10px;
    .com {
      color: rgb(247, 57, 57);
    }
   
  }

  .left,
  .right {
    flex: 0 0 40px;
    font-size: 18px;
  }
  .center {
    flex: 1;
    text-align: center;
  }
  .search-list1 {
    display: flex;
    // flex-grow: 2;
    flex-wrap: wrap;
    // justify-content: space-evenly;
    text-align: left;
    background-color: #ccc;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
    div {
      width: 45%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
.navs {
  height: 40px;
  line-height: 40px;
  display: flex;
  background-color: transparent;
  color: #646566;
  .item {
    flex: 1;
    text-align: center;
    font-size: 14px;
    span {
      display: inline-block;
      height: 21px;
      line-height: 21px;
      border-bottom: 1px solid transparent;
    }
    &.router-link-active span {
      border-color: #fff;
      font-weight: bold;
    }
  }
}
</style>